import React, { useState } from 'react';
import { Card, Table, Select, Form, Input, Button, Radio, DatePicker, Space } from 'antd';
import { SearchOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { RangePicker } = DatePicker;

const HierarchicalDiagnosis: React.FC = () => {
  const [loading, setLoading] = useState(false);
  
  // 模拟数据
  const dataSource = [
    {
      key: '1',
      id: 'HL001',
      patientName: '张三',
      age: 45,
      gender: '男',
      level: '二级',
      referralType: '上转',
      fromHospital: '社区卫生服务中心',
      toHospital: '市第一人民医院',
      date: '2023-08-15',
      status: '已完成'
    },
    {
      key: '2',
      id: 'HL002',
      patientName: '李四',
      age: 62,
      gender: '男',
      level: '三级',
      referralType: '上转',
      fromHospital: '区人民医院',
      toHospital: '省人民医院',
      date: '2023-08-17',
      status: '进行中'
    },
    {
      key: '3',
      id: 'HL003',
      patientName: '王五',
      age: 35,
      gender: '女',
      level: '一级',
      referralType: '下转',
      fromHospital: '市第二人民医院',
      toHospital: '社区卫生服务站',
      date: '2023-08-20',
      status: '已完成'
    }
  ];
  
  // 表格列定义
  const columns = [
    {
      title: '转诊单号',
      dataIndex: 'id',
      key: 'id',
      width: 100
    },
    {
      title: '患者姓名',
      dataIndex: 'patientName',
      key: 'patientName',
      width: 100
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 80
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      width: 80
    },
    {
      title: '级别',
      dataIndex: 'level',
      key: 'level',
      width: 80
    },
    {
      title: '转诊类型',
      dataIndex: 'referralType',
      key: 'referralType',
      width: 100
    },
    {
      title: '转出医院',
      dataIndex: 'fromHospital',
      key: 'fromHospital',
      width: 150
    },
    {
      title: '转入医院',
      dataIndex: 'toHospital',
      key: 'toHospital',
      width: 150
    },
    {
      title: '转诊日期',
      dataIndex: 'date',
      key: 'date',
      width: 120
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text) => {
        const color = text === '已完成' ? '#52c41a' : '#1890ff';
        return <span style={{ color }}>{text}</span>;
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_, record) => (
        <Space size="middle">
          <a>查看</a>
          <a>编辑</a>
        </Space>
      )
    }
  ];
  
  return (
    <div className="hierarchical-container">
      <Card bordered={false} title="分级诊疗管理">
        <Form layout="inline" className="search-form">
          <Form.Item label="转诊单号">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="患者姓名">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="转诊类型">
            <Select placeholder="请选择" style={{ width: 120 }}>
              <Option value="up">上转</Option>
              <Option value="down">下转</Option>
            </Select>
          </Form.Item>
          <Form.Item label="状态">
            <Select placeholder="请选择" style={{ width: 120 }}>
              <Option value="completed">已完成</Option>
              <Option value="in_progress">进行中</Option>
              <Option value="cancelled">已取消</Option>
            </Select>
          </Form.Item>
          <Form.Item label="转诊日期">
            <RangePicker />
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
          </Form.Item>
          <Form.Item>
            <Button icon={<ReloadOutlined />}>重置</Button>
          </Form.Item>
        </Form>
        
        <div className="table-operations">
          <Button type="primary" icon={<PlusOutlined />}>新增转诊单</Button>
        </div>
        
        <Table 
          columns={columns} 
          dataSource={dataSource} 
          loading={loading}
          pagination={{ 
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`
          }}
        />
      </Card>
    </div>
  );
};

export default HierarchicalDiagnosis; 
